import React, { PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {Icon, Row, Col, Form, Input, DatePicker, Button, Cascader} from 'antd';
const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;

import './less/person.less';

const residences = [{
  value: 'zhejiang',
  label: 'Zhejiang',
  children: [{
    value: 'hangzhou',
    label: 'Hangzhou',
    children: [{
      value: 'xihu',
      label: 'West Lake',
    }],
  }],
}, {
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men',
    }],
  }],
}];

const PersonData= ({location,dispatch,person,form}) => {
      const { getFieldDecorator } = form;
      const formItemLayout = {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 },
      };
      const formPasswordItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      };
      const tailFormItemLayout = {
        wrapperCol: {
          span: 14,
          offset: 6,
        },
      };
      const rangeConfig = {
        rules: [{ type: 'array', required: true, message: 'Please select time!' }],
      };
      return (
          <Row className="personContainer">
            <Col span={16} className="left">
                <div className="head">
                    个人资料
                </div>
                <Row>
                    <Col span={8} className="icon">
                        <div className="edit">
                            <i className="fa fa-user-o" />
                            <div className="editIcon">
                                <div className="blueIcon">
                                    <i className="fa fa-edit" />
                                </div>
                            </div>
                        </div>
                    </Col>
                    <Col span={16}>
                      <Form horizontal>
                        <FormItem
                          {...formItemLayout}
                          label="姓名"
                          hasFeedback
                        >
                          {getFieldDecorator('name', {
                            rules: [{
                              required: true, message: '请输入姓名!',
                            }],
                          })(
                            <Input placeholder="请输入姓名"/>
                          )}
                        </FormItem>
                        <FormItem
                          {...formItemLayout}
                          label="联系电话"
                          hasFeedback
                        >
                          {getFieldDecorator('telphone', {
                            rules: [{
                              required: true, message: '联系电话',
                            }],
                          })(
                            <Input placeholder="请输入联系电话"/>
                          )}
                        </FormItem>
                        <FormItem
                          {...formItemLayout}
                          label="邮政编码"
                          hasFeedback
                        >
                          {getFieldDecorator('code', {
                            rules: [{
                              required: true, message: '邮政编码',
                            }],
                          })(
                            <Input placeholder="邮政编码"/>
                          )}
                        </FormItem>
                        <FormItem
                          {...formItemLayout}
                          label="行政区域"
                          hasFeedback
                        >
                          {getFieldDecorator('residence', {
                            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
                            rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
                          })(
                            <Cascader options={residences} />
                          )}
                        </FormItem>
                        <FormItem
                          {...formItemLayout}
                          label="详细地址"
                          hasFeedback
                        >
                          {getFieldDecorator('address', {
                            rules: [{
                              required: true, message: '详细地址',
                            }],
                          })(
                            <Input placeholder="详细地址"/>
                          )}
                        </FormItem>
                        <FormItem
                          {...formItemLayout}
                          label="教学成绩"
                          hasFeedback
                        >
                          {getFieldDecorator('address', {
                            rules: [{
                              required: true, message: '教学成绩',
                            }],
                          })(
                            <Input type="textarea" placeholder="教学成绩"/>
                          )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="时间选择"
                          >
                          {getFieldDecorator('range-picker', rangeConfig)(
                              <RangePicker />
                            )}
                        </FormItem>
                        <FormItem
                          {...formItemLayout}
                          label="备注"
                          hasFeedback
                        >
                          {getFieldDecorator('remark', {
                            rules: [{
                              required: true, message: '备注',
                            }],
                          })(
                            <Input type="textarea" placeholder="备注"/>
                          )}
                        </FormItem>
                        <FormItem {...tailFormItemLayout}>
                          <Button type="primary" htmlType="submit" size="large">确定</Button>
                          <Button type="ghost" className="marginL5" size="large">取消</Button>
                        </FormItem>
                      </Form>
                    </Col>
                </Row>
            </Col>
            <Col span={8} className="right">
                <div className="rightContainer">
                    <div className="head">
                        密码管理
                    </div>
                    <Form horizontal>
                      <FormItem
                        {...formPasswordItemLayout}
                        label="初始密码"
                        hasFeedback
                      >
                        {getFieldDecorator('password', {
                          rules: [{
                            required: true, message: '请输入姓名!',
                          }],
                        })(
                          <Input type = 'password' placeholder="请输入姓名"/>
                        )}
                      </FormItem>
                      <FormItem
                        {...formPasswordItemLayout}
                        label="新密码"
                        hasFeedback
                      >
                        {getFieldDecorator('telphone', {
                          rules: [{
                            required: true, message: '联系电话',
                          }],
                        })(
                          <Input type = 'password' placeholder="请输入新密码"/>
                        )}
                      </FormItem>
                      <FormItem
                        {...formPasswordItemLayout}
                        label="重复密码"
                        hasFeedback
                      >
                        {getFieldDecorator('telphone', {
                          rules: [{
                            required: true, message: '联系电话',
                          }],
                        })(
                          <Input type = 'password' placeholder="请输入重复密码"/>
                        )}
                      </FormItem>
                      <FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit" size="large">确定</Button>
                        <Button type="ghost" className="marginL5" size="large">取消</Button>
                      </FormItem>
                    </Form>
                </div>
            </Col>
          </Row>
      )
}
export default Form.create()(PersonData);
